<template>
	<gracePage :customHeader="false">
		<view slot="gBody" style="background: #FFFFFF;" :style="{height:height}">
			<view style="background-image: url(../../static/register.png); background-size: contain; width: 750rpx;height: 800rpx;">
				<!--<view style="background-image: url(../../static/logo.png);background-size: contain;width: 180rpx;height: 180rpx;margin: 0 auto; position: relative;top: 47rpx;"></view>-->
			</view>
			<view class="grace-flex-center grace-wrap" style="margin-top: -200rpx;">
				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/yonghu.png" style="width: 36rpx;height: 36rpx;"></image>
						<input style="margin-left: 30rpx;width: 530rpx" v-model="phoneno" placeholder="请输入账号" />
					</view>
					<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>

				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/yanzhengma.png" style="width: 36rpx;height: 36rpx;"></image>
						<input type="number" style="margin-left: 30rpx;width: 330rpx" v-model="yanzhengma" placeholder="请输入短信验证码" />
						<button type="primary" class="login-sendmsg-btn" @tap='getVCode'>{{vcodeBtnName}}</button>
					</view>
					<view style="margin-top: 5rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>

				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/mima.png" style="width: 36rpx;height: 36rpx;"></image>
						<input password="true" v-model="mima" style="margin-left: 30rpx;width: 530rpx" placeholder="请输入密码" />
					</view>
					<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>

				<view style="margin-top: 25rpx;">
					<view class="grace-rows" style="margin: 0 auto;">
						<image src="../../static/yaoqingma.png" style="width: 36rpx;height: 36rpx;"></image>
						<input style="margin-left: 30rpx;width: 530rpx" v-model="yaoqingma" placeholder="请输入邀请码" />
					</view>
					<view style="margin-top: 15rpx; width: 600rpx;height: 2rpx;background:rgba(153,153,153,1);"></view>
				</view>
			</view>
			<button @tap="reg" :style="{background:button_color}" class="button_color"><text
				 style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1);line-height:70rpx;">立即注册</text></button>
				 <ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',
				height: '',
				phoneno: '', // 账号(手机号)
				yanzhengma: '', // 验证码
				mima: '', // 密码
				yaoqingma: '', // 邀请码
				vcodeBtnName: "获取验证码",
				u_pid: 0,
				loadings:false
			}
		},
		onLoad: function() {
			this.height = '100%'
			// #ifdef H5
			// var u_pid = uni.getStorageSync('my_u_pid');
			// if (u_pid != 0 || u_pid != '') {
			// 	this.u_pid = u_pid;
			// 	var vm = this
			// 	var data = {
			// 		u_pid: this.u_pid
			// 	}
			// 	vm.myPost(
			// 		'/mytrunk/userapi/get_u_pid', data,
			// 		function(res) {
			// 			console.log(res);
			// 			if (res.code == 200) {
			// 				vm.yaoqingma = res.data.phone
			// 			}

			// 		}
			// 	)
			// }
			// #endif


		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 立即注册事件
			reg() {
				if (this.phoneno.length > 0 && this.yanzhengma.length > 0 && this.mima.length > 0) {
					var data = {
						phone: this.phoneno,
						password: this.mima,
						recommend_num: this.yaoqingma,
						cms: this.yanzhengma
					}
					var vm = this;
					vm.loadings = true
					this.myPost(
						'/api/publicapi/register',
						data,
						function(res) {
							vm.loadings = false
							if (res.code == 200) {
								var data = res.data;
								uni.showToast({
									title: res.msg,
									icon: "none"
								});
								uni.redirectTo({
									url: '/pages/user/login'
								});
							}
							console.log(res);
						}
					);
				} else {
					uni.showToast({
						title: '请输入完整的信息',
						icon: "none"
					});
				}
			},
			// 获取验证码事件
			getVCode: function() {
				var myreg = /^[1][1,2,3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phoneno)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				this.myPost(
					'/api/sendcms/send_cms', {
						phone: this.phoneno,
						class: 'Register'
					},
					function(res) {
						if (res.code == 200) {
							console.log(res);
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					}
				);
				// 倒计时
				this.countNum = 60;
				this.countDownTimer = setInterval(function() {
					this.countDown();
				}.bind(this), 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.login-sendmsg-btn {
		background: #B5B5B5 !important;
		color: rgba(51, 51, 51, 1) !important;
		width: 200rpx;
		height: 32px;
		line-height: 32px;
		font-size: 12px !important;
	}
	.button_color{
		margin-top: 100rpx; width:607rpx;height:88rpx;border-radius:44rpx;
	}
</style>
